<template>
	<view class="navigation">
		<view class="left">
			<view class="item" @click="GoHome">
				<!-- <u-icon name="home" :size="40" :color="$u.color['contentColor']"></u-icon> -->
				<image src="https://aigxyy.oss-cn-shenzhen.aliyuncs.com/images/shopimg/home.png"></image>
				<view class="text u-line-1">店铺</view>
			</view>
			<view class="item" @click="ShopServicesPhone($globalConfig.shopSrvTel)">
				<!-- <u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon> -->
				<image src="https://aigxyy.oss-cn-shenzhen.aliyuncs.com/images/shopimg/chat.png"></image>
				<view class="text u-line-1">客服</view>
			</view>
			<view class="item car" @click="GoCart">
				<u-badge class="car-num" :value="props.BuyNum" type="error" :absolute="true" :offset="[0,-7]"></u-badge>
				<!-- <u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon> -->
				<image src="https://aigxyy.oss-cn-shenzhen.aliyuncs.com/images/shopimg/scart.png" style="left:-3px;"></image>
				<view class="text u-line-1">购物车</view>
			</view>
		</view>
		<view class="right">
			<view class="cart btn u-line-1" :class="props.isDisabledCart===true?'disabledCart':''" @click="AddToCart('购物车')">加入购物车</view>
			<view class="buy btn u-line-1" @click="AddToCart('立即购买')">立即购买</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { reactive,ref } from 'vue';
import { GoUrl,Toast } from '@/utils/utils'
	
	const props=defineProps({
		BuyNum:{
			type: Number,
			default:0		
		},
		isDisabledCart:{
			type: Boolean,
			default:false,				
		}	
	})
	
	const $emit = defineEmits<{
		(event : 'OpenCart', data : any) : any
	}>()
	
	const GoCart=()=>{
		GoUrl('../shop_car/shop_car',2);
	}
	
	const ShopServicesPhone=(tel:string)=>{
		uni.showModal({
			title: '操作提示',
			content: '是否拨打客服电话'+tel,
			showCancel: true,
			cancelText: '取消',
			confirmText: '拨打电话',
			success: res => {
				if(res.confirm){
					uni.makePhoneCall({
						phoneNumber:tel  //仅为示例
					});
				}
			}
		});
	}

	const GoHome=()=>{
		GoUrl('../shopindex/index',2);
	}
	const AddToCart=(Act:string)=>{
		let data={
			show:true,
			act:Act //用于路由跳转
		}
	    $emit("OpenCart",data); 
	}
</script>
 
<style lang="scss" scoped>
.navigation {
	width:100%;
	overflow:hidden;
	position:fixed;
	bottom:0px;
	left:0px;
	display: flex;
	margin-top: 100rpx;
	border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	padding: 16rpx 0;
	.left {
		display: flex;
		font-size: 20rpx;
		.item {
			margin: 0 35rpx;
			image{
				position:relative;
				top:10rpx;
				left:0rpx;
				width:40rpx;
				height:40rpx;
			}
			&.car {
				text-align: center;
				position: relative;
				.car-num {
					position: absolute;
					top: -10rpx;
					right:0rpx;
				}
			}
			.text{ margin-top:10rpx; }
		}
	}
	.right {
		/* border:1px solid red; */
		display: flex;
		font-size: 28rpx;
		align-items: center;
		.btn {
			line-height: 66rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			color: #ffffff;
		}
		.cart {
			background: #FFFFFF;
			border: 1px solid #017BFF;
			border-radius:8rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #017BFF;
			margin-right:20rpx;
		}
		.buy {
			background: #017BFF;
			border-radius: 8rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			margin-right:0rpx;
			height:70rpx;
			line-height:70rpx;
		}
		.disabledCart{
			text-decoration:line-through;
			border: 1px solid #999 !important;
			color: #999 !important;
		}
	}
}
</style>
